<template>
	<div class="offer">
		<div class="node_list">
			<div
				class="node"
				v-for="it in node_config">
				<span class="node_title">{{ it.label }}</span>
				<div class="node_content">
					<span>{{ it.text }}</span>
				</div>
			</div>
		</div>

		<div class="node_config">123123</div>
	</div>
</template>

<script setup lang="ts">
import { node_config } from "./config";
</script>

<style lang="less" scoped>
.offer {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 20px;
	display: flex;

	.node_list {
		display: flex;
		flex-direction: column;
		border: 1px solid red;
		flex: 1;

		.node {
			width: 220px;
			height: 80px;
			background-color: white;
			margin-bottom: 60px;
			border-radius: 6px;
			display: flex;
			flex-direction: column;
			box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1);
			position: relative;
			cursor: pointer;

			.node_title {
				background-color: #576b95;
				border-top-left-radius: 6px;
				border-top-right-radius: 6px;
				color: white;
				padding: 6px 16px;
				font-size: 14px;
				flex-shrink: 0;
			}

			.node_content {
				display: flex;
				align-items: center;
				flex: 1;
				padding: 0 16px;
			}
		}

		.node:not(:last-child)::after {
			content: "";
			position: absolute;
			height: 60px;
			width: 4px;
			background-color: #cacaca;
			left: 50%;
			top: 100%;
		}
	}
}
</style>
